<template>
    <div id="app">
        <vue-particles
            id="tsparticles"
            :particlesInit="particlesInit"
            :particlesLoaded="particlesLoaded"
            :options="{
                    background: {
                        color: {
                            value: '#1296db'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'push'
                            },
                            onHover: {
                                enable: true,
                                mode: 'repulse'
                            },
                            resize: true
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40
                            },
                            push: {
                                quantity: 4
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4
                            }
                        }
                    },
                    particles: {
                        color: {
                            value: ['#ffffff', '#dc3545', '#67C23A', '#E6A23C', '#909399', '#ffff00', '#800080', '#ff0000', '#e55934', '#1296db']
                        },
                        links: {
                            color: '#ffffff',
                            distance: 150,
                            enable: true,
                            opacity: 0.5,
                            width: 1
                        },
                        move: {
                            direction: 'top',
                            enable: true,
                            outMode: 'out',
                            random: false,
                            speed: 6,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 1000
                            },
                            value: 200
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            random: true,
                            value: 50
                        }
                    },
                    detectRetina: true
                }"
        />
    </div>
      <teleport to="body">
    <div>
      <el-row :gutter="0">
      <el-col :span="8" :offset="8" style="margin-top:150px">
        <el-card class="box-card" style="text-align: center;">
          <h1>在线Coding</h1>
          <br>
          
          <div style="display:flex;justify-content: space-between;flex-flow: row;">
            <el-card :body-style="{ padding: '0px',cursor: 'pointer' }" @click="code('java')">
                <img
                src="@/assets/image/java.png"
                />
            </el-card>

            <el-card :body-style="{ padding: '0px',cursor: 'pointer' }" @click="code('mysql')">
                <img
                src="@/assets/image/mysql.png"
                class="image"
                />
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </div>
  </teleport>
</template>
<script lang="ts" setup>
import { loadFull } from "tsparticles"
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const particlesInit = async engine => {
    await loadFull(engine)
}

const particlesLoaded = async container => {
    console.log("Particles container loaded", container)
}
const code = (name:string):void =>{
if(name == 'java') {
    router.push({name:'JavaCode'})
}
if(name == 'mysql') {
    router.push({name:'SqlCode'})
}
}
</script>